
/*
 * base stylesheets included in every chart
 */

{% for name, urls in fonts %}
    {% if urls.method == "import" %}
        @import '{{ urls.import | raw }}';
    {% else %}
        @font-face {
            font-family: "{{ name }}";
            src: url('{{ urls.files.eot }}');
            src: url('{{ urls.files.eot }}?#iefix') format('embedded-opentype'),
            url('{{ urls.files.woff }}') format('woff'),
            url('{{ urls.files.ttf }}') format('truetype'),
            url('{{ urls.files.svg }}#{{ name }}') format('svg');
        }
    {% endif %}

{% endfor %}

.chart {
    {% if typography_chart_typeface %}
        font-family: @typography_chart_typeface;
    {% endif %}

    {% if typography_chart_color %}
        color: @typography_chart_color;
    {% else %}
        color: @colors_text
    {% endif %}

    {% if typography_chart_textTransform %}
        text-transform: @typography_chart_textTransform;
    {% endif %}

    {% if typography_chart_letterSpacing %}
        letter-spacing: ~'@{typography_chart_letterSpacing}px';
    {% endif %}

    {% if typography_chart_fontSize %}
        font-size: ~'@{typography_chart_fontSize}px';
    {% endif %}

    {% if colors_general_background %}
        background: @colors_general_background;
    {% endif %}


    {% if style_body_padding %}
        padding: @style_body_padding;
    {% elseif colors_general_padding %}
        padding: ~'@{colors_general_padding}px';
    {% endif %}

    {% if style_body_margin %}
        margin: @style_body_margin;
    {% else %}
        margin: 0 0px;
    {% endif %}

    height: 100%;

    &.vis-height-fit {
        overflow:hidden;
    }

    a {
        {% if typography_links_color %}
            color: @typography_links_color;
        {% endif %}
        {% if typography_links_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}
    }
        {% if typography_links_hoverColor %}
            a:hover {
                color: @typography_links_hoverCcolor;
            }
        {% endif %}

    .dw-chart-header {
        min-height: 1px;
        position: relative;
        overflow: auto;

        .header-right {
            position: absolute;
            right: 10px;
            z-index: 20;
        }

        {% if style_header_padding %}
            padding: @style_header_padding;
        {% endif %}

        {% if style_header_margin %}
            margin: @style_header_margin;
        {% endif %}

        {% if style_header_background %}
            background: @style_header_background;
        {% endif %}

        {% if style_header_border_top %}
            border-top: @style_header_border_top;
        {% endif %}

        {% if style_header_border_bottom %}
            border-bottom: @style_header_border_bottom;
        {% endif %}

        {% if style_header_border_left %}
            border-left: @style_header_border_left;
        {% endif %}

        {% if style_header_border_right %}
            border-right: @style_header_border_right;
        {% endif %}

        {% if style_header_textAlign %}
            text-align: @style_header_textAlign;
        {% endif %}


        h1 {
            {% if typography_headline_typeface %}
                font-family: @typography_headline_typeface;
            {% endif %}

            {% if typography_headline_fontWeight %}
                font-weight: @typography_headline_fontWeight;
            {% endif %}

            {% if typography_headline_fontSize %}
                font-size: ~'@{typography_headline_fontSize}px';
            {% endif %}

            {% if typography_headline_lineHeight %}
                line-height: ~'@{typography_headline_lineHeight}px';
            {% endif %}

            {% if typography_headline_textTransform %}
                text-transform: @typography_headline_textTransform;
            {% endif %}

            {% if typography_headline_letterSpacing %}
                letter-spacing: ~'@{typography_headline_letterSpacing}px';
            {% endif %}

            {% if typography_headline_cursive %}
                font-style: italic;
            {% else %}
                font-style: normal;
            {% endif %}

            {% if typography_headline_underlined %}
                text-decoration: underline;
            {% else %}
                text-decoration: none;
            {% endif %}

            {% if typography_headline_color%}
                color: @typography_headline_color;
            {% endif %}

            {% if style_header_title_textAlign %}
                text-align: @style_header_title_textAlign;
            {% endif %}

            {% if style_header_title_margin %}
                margin: @style_header_title_margin;
            {% else %}
                margin:0 0 10px;;
            {% endif %}

            {% if style_header_title_padding %}
                padding: @style_header_title_padding;
            {% endif %}

            {% if style_header_title_border_top %}
                border-top: @style_header_title_border_top;
            {% endif %}

            {% if style_header_title_border_bottom %}
                border-bottom: @style_header_title_border_bottom;
            {% endif %}

            {% if style_header_title_border_left %}
                border-left: @style_header_title_border_left;
            {% endif %}

            {% if style_header_title_border_right %}
                border-right: @style_header_title_border_right;
            {% endif %}

        }


        p {
            {% if typography_description_typeface %}
                font-family: @typography_description_typeface;
            {% endif %}

            {% if typography_description_fontWeight %}
                font-weight: @typography_description_fontWeight;
            {% endif %}

            {% if typography_description_fontSize %}
                font-size: ~'@{typography_description_fontSize}px';
            {% endif %}

            {% if typography_description_textTransform %}
                text-transform: @typography_description_textTransform;
            {% endif %}

            {% if typography_description_lineHeight %}
                line-height: ~'@{typography_description_lineHeight}px';
            {% endif %}

            {% if typography_description_letterSpacing %}
                letter-spacing: ~'@{typography_description_letterSpacing}px';
            {% endif %}

            {% if typography_description_cursive %}
                font-style: italic;
            {% else %}
                font-style: normal;
            {% endif %}

            {% if typography_description_underlined %}
                text-decoration: underline;
            {% else %}
                text-decoration: none;
            {% endif %}

            {% if typography_description_color%}
                color: @typography_description_color;
            {% endif %}

            {% if style_header_description_margin %}
                margin: @style_header_description_margin;
            {% else %}
                margin: 5px 0 10px !important;
            {% endif %}

            {% if style_header_description_padding %}
                padding: @style_header_description_padding;
            {% endif %}

            {% if style_header_description_textAlign %}
                text-align: @style_header_description_textAlign;
            {% endif %}

            {% if style_header_description_border_bottom %}
                border-bottom: @style_header_description_border_top;
            {% endif %}

            {% if style_header_description_border_left %}
                border-left: @style_header_description_border_top;
            {% endif %}

            {% if style_header_description_border_right %}
                border-right: @style_header_description_border_top;
            {% endif %}

        }

    }

    .dw-chart-body {

        {% if typography_chart_fontWeight %}
            font-weight: @typography_chart_fontWeight;
        {% endif %}

        &.dark-bg .label span {

            {% if typography_chart_color %}
                color: @typography_chart_color;
                fill: @typography_chart_color;
            {% else %}
                color: #f1f1f1;
                fill: #f1f1f1;
            {% endif %}
        }

        {% if style_chart_axes_gridlines_color %}

            path.y-gridline, line.gridline, .major-grid-line line, line.y-gridline, line.y-tick{
                stroke: @style_chart_axes_gridlines_color;
            }
            .bc-grid-line {
                border-left-color: @style_chart_axes_gridlines_color;
            }
            .y-gridline {
                border-top-color:@style_chart_axes_gridlines_color;
            }
        {% endif %}

        {% if style_chart_axes_gridlines_baselineColor %}

            path.grid.x-axis, line.x-axis, .vis-frame line.axis, line.x-tick, line.theme-tick.y-tick, line.y-axis {
                stroke: @style_chart_axes_gridlines_baselineColor;
            }
            .bc-grid-baseline {
                border-left-color: @style_chart_axes_gridlines_baselineColor
            }
        {% endif %}

            path.y-gridline, line.gridline, .major-grid-line line, line.y-gridline {
                {% if style_chart_axes_gridlines_style_strokeDasharray %}
                    stroke-dasharray: @style_chart_axes_gridlines_style_strokeDasharray;
                {% endif %}
                {% if style_chart_axes_gridlines_style_strokeLinecap %}
                    stroke-linecap: @style_chart_axes_gridlines_style_strokeLinecap;
                {% endif %}
            }
            .bc-grid-line {
                {% if style_chart_axes_gridlines_style_style %}
                    border-left-style:@style_chart_axes_gridlines_style_style;
                {% else %}
                    border-left-style: solid;
                {% endif %}
            }

        {% if style_chart_axes_gridlines_width %}

            path.y-gridline, line.gridline, .major-grid-line line, line.y-gridline, line.y-tick, path.grid.x-axis, line.x-axis, .vis-frame line.axis  {
                stroke-width:~'@{style_chart_axes_gridlines_width}px';
            }
            .y-gridline {
                border-top-width:~'@{style_chart_axes_gridlines_width}px';
            }

        {% endif %}

        {% if style_chart_axes_gridlines_baselineWidth %}
            path.grid.x-axis, line.x-axis, line.axis.y-axis  {
                stroke-width:~'@{style_chart_axes_gridlines_baselineWidth}px';
            }

        {% endif %}


        {% if style_chart_padding %}
            padding: @style_chart_padding;
        {% endif %}

        {% if style_chart_margin %}
            margin: @style_chart_margin;
        {% else %}
            &.content-below-chart {
                margin: 0px 0px 20px 0px;
            }
        {% endif %}

        {% if style_chart_border_top %}
            border-top: @style_chart_border_top;
        {% endif %}

        {% if style_chart_border_bottom %}
            border-bottom: @style_chart_border_bottom;
        {% endif %}

        {% if style_chart_border_left %}
            border-left: @style_chart_border_top;
        {% endif %}

        {% if style_chart_border_right %}
            border-right: @style_chart_border_top;
        {% endif %}

    }

        .labels text {

            {% if typography_chart_fontSize %}
                font-size: ~'@{typography_chart_fontSize}px';
            {% endif %}
        }

        .label {

                {% if typography_chart_fontSize %}
                    font-size: ~'@{typography_chart_fontSize}px';
                {% endif %}

            span, tspan {

                {% if typography_chart_color %}
                    color: @typography_chart_color;
                    fill: @typography_chart_color;
                {% else %}
                    color: #333333;
                    fill: #333333
                {% endif %}
            }

            &.value, &.value span {

                {% if style_chart_labels_values_tabularNums %}
                    font-feature-settings: 'tnum';
                    -webkit-font-feature-settings: 'tnum';
                    -moz-font-feature-settings: 'tnum';
                {% endif %}

                {% if style_chart_labels_values_fontSize %}
                    font-size: ~'@{style_chart_labels_values_fontSize}px';
                {% endif %}

                {% if style_chart_labels_values_letterSpacing %}
                    letter-spacing: ~'@{style_chart_labels_values_letterSpacing}px';
                {% endif %}

                {% if style_chart_labels_values_color %}
                    color: @style_chart_labels_values_color;
                {% endif %}

                {% if style_chart_labels_values_typeface %}
                    font-family: @style_chart_labels_values_typeface;
                {% endif %}
            }

            {% if colors_background %}
                span {
                    text-shadow: ~'0 0 2px @{colors_background}';
                }
            {% endif %}

            &.inverted span {
                text-shadow: 0 0px 2px #000000;
                {% if style_chart_labels_inside_inverted %}
                    color: @style_chart_labels_inside_inverted;
                {% else %}
                    color: #ffffff;
                {% endif %}


            }

            &.inside:not(.inverted) span {
                text-shadow: 0 0px 2px #ffffff;
                {% if style_chart_labels_inside_normal %}
                    color: @style_chart_labels_inside_normal
                {% else %}
                    color: #333333;
                {% endif %}
            }

            {% if colors_background %}
                &.outline span {
                    text-shadow: ~'0 1px 0 @{colors_background}, 1px 0 0 @{colors_background}, 0 -1px 0 @{colors_background}, -1px 0 0 @{colors_background},1px 1px 0 @{colors_background}, 1px -1px 0 @{colors_background}, -1px -1px 0 @{colors_background}, -1px 1px 0 @{colors_background},0 2px 1px @{colors_background}, 2px 0 1px @{colors_background}, 0 -2px 1px @{colors_background}, -2px 0 1px @{colors_background},-1px 2px 0px @{colors_background}, 2px -1px 0px @{colors_background}, -1px -2px 0px @{colors_background}, -2px -1px 0px @{colors_background},1px 2px 0px @{colors_background}, 2px 1px 0px @{colors_background}, 1px -2px 0px @{colors_background}, -2px 1px 0px @{colors_background}';
                }

                &.axis-label span {
                    text-shadow:~'-1px -1px 2px @{colors_background}, -1px 0px 2px @{colors_background}, -1px 1px 2px @{colors_background}, 0px -1px 2px @{colors_background}, 0px 1px 2px @{colors_background}, 1px -1px 2px @{colors_background}, 1px 0px 2px @{colors_background}, 1px 1px 2px @{colors_background}';
                }
            {% endif %}

            sup {
                text-shadow: none;
            }


            &.highlighted {
                font-weight: bold;
            }

            &.highlighted, .label.axis {
                {% if typography_chart_fontSize %}
                    font-size: ~'@{typography_chart_fontSize}px';
                {% endif %}
                z-index: 100;
            }

            &.hover {
                font-weight: bold;
            }

            &.smaller span {
                font-size: 80%;
            }

            &.legend-text span, &.legend-text {

                {% if style_chart_labels_legend_tabularNums %}
                    font-feature-settings: 'tnum';
                    -webkit-font-feature-settings: 'tnum';
                    -moz-font-feature-settings: 'tnum';
                {% endif %}

                {% if style_chart_labels_legend_fontWeight %}
                    font-weight: @style_chart_labels_legend_fontWeight;
                {% endif %}

                {% if style_chart_labels_legend_fontSize %}
                    font-size: ~'@{style_chart_labels_legend_fontSize}px';
                {% endif %}

                {% if style_chart_labels_legend_color %}
                    color: @style_chart_labels_legend_color;
                {% endif %}

                {% if style_chart_labels_legend_typeface %}
                    font-family: @style_chart_labels_legend_typeface;
                {% endif %}
            }
        }

    .dw-chart-notes {
        {% if typography_notes_typeface %}
            font-family: @typography_notes_typeface;
        {% endif %}

        {% if typography_notes_fontWeight %}
            font-weight: @typography_notes_fontWeight;
        {% endif %}

        {% if typography_notes_textTransform %}
            text-transform: @typography_notes_textTransform;
        {% endif %}

        {% if typography_notes_fontSize %}
            font-size: ~'@{typography_notes_fontSize}px';
        {% endif %}

        {% if typography_notes_lineHeight %}
            line-height: @typography_notes_lineHeight;
        {% endif %}

        {% if typography_notes_cursive %}
            font-style: italic;
        {% else %}
            font-style: normal;
        {% endif %}

        {% if typography_notes_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}

        {% if typography_notes_color%}
            color: @typography_notes_color;
        {% endif %}

        {% if style_notes_textAlign %}
            text-align: @style_notes_textAlign;
        {% endif %}

        {% if style_notes_padding %}
            padding: @style_notes_padding;
        {% endif %}

        {% if style_notes_margin %}
            margin: @style_notes_margin;
        {% else %}
            margin: 0px 0px 5px 0px;
        {% endif %}

        position: relative;

    }
    #footer, .dw-chart-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;


        {% if style_footer_padding %}
            padding: @style_footer_padding;
        {% endif %}

        {% if style_footer_margin %}
            margin: @style_footer_margin;
        {% endif %}

        & > div > .footer-block {
            display: inline-block;

            &.hidden {
                display: none;
            }

            a[href=""] {
                {# empty links should look like text #}
                color: @typography_footer_color;
                pointer-events: none;
                text-decoration: none;
                padding: 0;
                border-bottom: 0;
            }

            .separator {
                display: inline-block;
                font-style:initial;

                &:before {
                    content: "•";
                    display: inline-block;
                }
            }
        }

        & > div {
            .footer-block.hidden:first-child + .footer-block:not(.hidden) .separator,
            .footer-block.hidden:first-child
              + .footer-block.hidden
              + .footer-block:not(.hidden) .separator,
            .footer-block.hidden:first-child
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block:not(.hidden) .separator,
            .footer-block.hidden:first-child
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block:not(.hidden) .separator,
            .footer-block.hidden:first-child
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block:not(.hidden) .separator,
            .footer-block.hidden:first-child
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block.hidden
              + .footer-block:not(.hidden) .separator {
                display: none;
            }
        }

        & > div > a::before, & > div > .source-block::before, & > div > .footer-block::before {
            {# content: "•";
            display: inline-block; #}
            {# margin-right: 4px; #}
        }

        & > div > a:first-child::before, & > div > .source-block:first-child::before, & > div > .footer-block:first-child::before {
            content: "";
            display: none;
        }

        {% if typography_footer_typeface %}
            font-family: @typography_footer_typeface;
        {% endif %}

        {% if typography_footer_fontWeight %}
            font-weight: @typography_footer_fontWeight;
        {% endif %}

        {% if typography_footer_fontSize %}
            font-size: ~'@{typography_footer_fontSize}px';
        {% endif %}

        {% if typography_footer_textTransform %}
            text-transform: @typography_footer_textTransform;
        {% endif %}

        {% if typography_footer_lineHeight %}
            line-height: @typography_footer_lineHeight;
        {% endif %}

        {% if typography_footer_cursive %}
            font-style: italic;
        {% else %}
            font-style: normal;
        {% endif %}

        {% if typography_footer_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}

        {% if typography_footer_color %}
            color: @typography_footer_color;
        {% endif %}

        {% if style_footer_border_top %}
            border-top: @style_footer_border_top;
        {% endif %}

        {% if style_footer_border_bottom %}
            border-bottom: @style_footer_border_bottom;
        {% endif %}

        {% if style_footer_border_left %}
            border-left: @style_footer_border_left;
        {% endif %}

        {% if style_footer_border_right %}
            border-right: @style_footer_border_right;
        {% endif %}


    }

    .dw-chart-notes a,
    .dw-chart-footer a {

        {% if style_footer_links_padding %}
            padding: @style_footer_links_padding;
        {% endif %}

        {% if style_footer_links_border_bottom %}
            border-bottom: @style_footer_links_border_bottom;
        {% endif %}

        {% if typography_links_typeface %}
            font-family: @typography_links_typeface;
        {% endif %}

        {% if typography_links_fontWeight %}
            font-weight: @typography_links_fontWeight;
        {% endif %}

        {% if typography_links_lineHeight %}
            line-height: @typography_links_lineHeight;
        {% endif %}

        {% if typography_links_cursive %}
            font-style: italic;
        {% else %}
            font-style: normal;
        {% endif %}

        {% if typography_links_underlined %}
            text-decoration: underline;
        {% else %}
            text-decoration: none;
        {% endif %}

        {% if typography_links_color %}
            color: @typography_links_color;
        {% endif %}
    }

    a img {
        border: 0px;
    }

    .embed-code {
        position: absolute;
        bottom: 20px;
        left: 0;
        padding: 15px;
        background: #eee;
        color: #000;
        border-radius: 6px;
        text-transform: none;
        font-size: 1em;
        box-shadow: 2px 2px 0px rgba(0,0,0,.4);
        z-index: 10;
    }

    .embed-code textarea {
        width: 90%;
        margin-top: 2%;
        height: 7em;
    }

    .hide {
        display: none;
    }

    .embed-code .close {
        cursor: pointer;
        position: absolute;
        right: 2%;
        top: 2%;
        font-size: 1.125em;
        opacity: 0.7;
    }

    .embed-code .close:hover {
        opacity: 1;
    }

    .secondary.tick, text.secondary.tick, .secondary.tick text, .secondary.tick span {

        {% if style_chart_labels_ticks_secondary_tabularNums %}
            font-feature-settings: 'tnum';
            -webkit-font-feature-settings: 'tnum';
            -moz-font-feature-settings: 'tnum';
        {% endif %}

        {% if style_chart_labels_ticks_secondary_typeface %}
            font-family: @style_chart_labels_ticks_secondary_typeface;
        {% endif %}
        {% if style.chart.labels.ticks.secondary.fontSize %}
            font-size: {{ style.chart.labels.ticks.secondary.fontSize ~'px' }};
        {% endif %}

        {% if style_chart_labels_ticks_secondary_color %}
            color: @style_chart_labels_ticks_secondary_color;
            fill: @style_chart_labels_ticks_secondary_color;
        {% elseif style_chart_labels_ticks_color %}
            color: @style_chart_labels_ticks_color;
            fill: @style_chart_labels_ticks_color;
        {% endif %}

    }

    .primary.tick {

        {% if style_chart_labels_ticks_primary_typeface %}
            font-family: @style_chart_labels_ticks_primary_typeface;
        {% endif %}

        {% if style.chart.labels.ticks.primary.fontSize %}
            font-size: {{ style.chart.labels.ticks.primary.fontSize ~'px' }};
        {% endif %}

        {% if style_chart_labels_ticks_primary_tabularNums %}
            font-feature-settings: 'tnum';
            -webkit-font-feature-settings: 'tnum';
            -moz-font-feature-settings: 'tnum';
        {% endif %}

          span, text, tspan {

            {% if style_chart_labels_ticks_primary_color %}
                color: @style_chart_labels_ticks_primary_color;
                fill: @style_chart_labels_ticks_primary_color;
            {% elseif style_chart_labels_ticks_color %}
                color: @style_chart_labels_ticks_color;
                fill: @style_chart_labels_ticks_color;
            {% endif %}

        }
    }

    .dw-tooltip {
        {% if style_tooltip_color %}
                color:@style_chart_tooltip_text_color;
        {% else %}
                color:#333333;
        {% endif %}
    }

    .tooltip {
        z-index: 200;
        padding-bottom: 0px;

        .content {
            background-color: #fff;
            border: 1px solid #888;
            box-shadow: 2px 2px 2px rgba(0,0,0,.2);
            padding: 5px 8px;
        }

        label {
            font-weight: 700;
        }

        label:after {
            content: ": ";
        }
    }

    .logo {
        position: absolute;
        right: 0;
        bottom: 0;
        .big {
            display: none;
        }
    }

    svg .axis, svg .tick, svg .grid, svg rect {
        shape-rendering: crispEdges;
    }

    .filter-links {
        height: 30px;
        overflow-x: hidden;
        overflow-y: hidden;
        border-bottom: 1px solid #ccc;
        {% if typography_chart_fontSize %}
            font-size: ~'@{typography_chart_fontSize}px';
        {% endif %}


        a {
            color: #666;
            height: 28px;
            line-height: 28px;
            padding: 10px;
            text-decoration: none;

            &:hover {
                color: #222;
            }

            &.active {
                font-weight: bold;
                color: #000;
                box-shadow: none;
                cursor: default;
                text-decoration: none;

                border-bottom: 3px solid #555;
                padding: 10px 10px 6px 10px;
            }
        }
    }

    .filter-select {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 4px 4px 4px 4px;
        padding: 4px 6px;
        vertical-align: middle;
        {% if typography_chart_fontSize %}
            font-size: ~'@{typography_chart_fontSize}px';
        {% endif %}
    }

    &.plain #footer {
        height: 10px;
    }

    &.js .noscript {
        display: none;
    }

    .hidden {
        display: none;
    }

    .label.annotation span {
        background: transparent;
    }

    .legend-item.hover .label {
        font-weight: bold;
    }

    .watermark {
        position: fixed;
        left: 0;
        bottom: 0;
        transform-origin: top left;
        opacity: 0.182;
        font-weight: bold;
        font-size: 6px;
        white-space: nowrap;
    }
}


.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.point {
    border: 1px solid #ccc;
    display: inline-block;
    position: absolute;
    background: #fff;
    z-index: 100;
    cursor: pointer;

    height: 20px;
    width: 20px;
    border-radius: 20px;
    top: 20px;

    &:hover {
        background: #ebebeb;
    }

    &.active {
        background: #ccc;
        height: 20px;
        width: 20px;
        border-radius: 20px;
        top: 20px;
        border-color: #888;
    }
}

.point-label {
    position: absolute;
}

.line {
    height: 1px;
    background: #ccc;
    position: absolute;
    left: 0px;
    top: 30px;
    z-index: 1;
}

.vis-pie-chart path,
.vis-donut-chart path,
.vis-election-donut-chart path {
    stroke-width: 0.5;
}